<template>
  <el-dialog
      v-if="bodyLoading"
      :title="this.stringFormat('{0}{1}', [this.$t('common.query'), this.$t('common.history')])"
      :visible.sync="bodyLoading"
      :width="width"
      @close="closeDialog">
    <el-empty v-if="!data.columns"></el-empty>
    <div v-else>
      <el-alert v-if="data.columns.length >= 100" :title="this.$t('tooltip.history_max')" type="error"/>
      <el-table v-loading.body="tableBodyLoading" style="width: 100%"
                :data="data.columns.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
        <el-table-column>
          <template slot="header">
            <el-tooltip class="item" effect="dark"
                        :content="this.stringFormat('{0}{1}{2}', [$t('common.clear'), $t('common.query'), $t('common.history')])"
                        placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handlerClearHistory()"></el-button>
            </el-tooltip>
            <el-pagination
                v-if="data.columns.length > 0"
                layout="total, sizes, prev, pager, next"
                :total="data.columns.length"
                :page-sizes="[10, 20, 30, 50]"
                @current-change="handlerChangePage"
                @size-change="handleSizeChange"
                background/>
          </template>
          <template slot-scope="scope">
            <el-card :class="'box-card ' + (scope.row.status ? 'success' : 'error')">
              <div slot="header" class="clearfix">
                <el-button type="text" disabled>
                  <i
                      :class="'fa fa-' + (scope.row.status ? 'check-circle' : 'exclamation-circle')"
                      :style="'color: ' + (scope.row.status ? '#67C23A' : '#F56C6C') + ';'">
                  </i>
                  <span>{{ scope.row.startTime }}</span>
                </el-button>
                <el-button type="text" style="float: right;" v-clipboard:copy="scope.row.query"
                           v-clipboard:success="onCopy" v-clipboard:error="onError">
                  <i class="fa fa-copy"></i>
                </el-button>
              </div>
              <codemirror v-model="scope.row.query"></codemirror>
              <p v-if="!scope.row.status"> {{ scope.row.message }}</p>
            </el-card>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="bodyLoading = false" size="mini">{{ this.$t('common.cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import TableDetail from '@/components/Table'
import { clearQueryHistory, getQueryHistory } from '@/services/Query'

export default {
  name: 'QueryHistory',
  components: {
    TableDetail
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    }
  },
  created() {
    this._initialize()
  },
  data() {
    return {
      bodyLoading: false,
      tableBodyLoading: false,
      data: [],
      pageSize: 10,
      currentPage: 1
    }
  },
  methods: {
    _initialize() {
      this.data = getQueryHistory()
    },
    handlerClearHistory() {
      clearQueryHistory()
      this.$notify({
        title: this.$t('common.notification'),
        type: 'success',
        message: this.stringFormat('{0} {1} {2} {3}!', [this.$t('common.clear'), this.$t('common.query'), this.$t('common.history'), this.$t('common.success')])
      })
      this._initialize()
    },
    handlerChangePage(currentPage) {
      this.currentPage = currentPage
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
    },
    closeDialog() {
      this.$emit('close')
    }
  },
  watch: {
    loading: {
      deep: true,
      handler() {
        this.bodyLoading = this.loading
        this._initialize()
      }
    },
    width: {
      deep: true
    }
  }
}
</script>

<style scoped>
/deep/ .el-card {
  color: #FFFFFF;
}

/deep/ .el-card__header {
  padding: 5px 15px;
  border-bottom: 0px solid #ebeef5;
}

/deep/ .el-card__body {
  padding: 5px 15px;
}

/deep/ .CodeMirror {
  border: 1px solid #eee;
  height: 100px;
}

.success {
  background-color: #557844;
}

.error {
  background-color: #bd8c8c;
}
</style>
